<script setup>

import {BaseImgUrl} from "../../utils/lshttp";
import {onReady, onShow} from "@dcloudio/uni-app";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {ref} from "vue";

const props = defineProps({
  isMeiTuan: {
    type: Boolean,
    default: true
  }
})
const toVIP = () => {
  uni.navigateTo({url: "/pagesme/vip/vip"});
}
const toGroup = () => {
  uni.navigateTo({url: "/pages/share/vipgroup"});
}
const toGetUser = () => {
  uni.switchTab({url: "/pages/makemoney/makemoney"});
}
const isMember = ref()
const userInfoStore = useUserInfoStore()
isMember.value = userInfoStore.userInfo.is_member
// onShow(() => {
//   const userInfoStore = useUserInfoStore()
//   isMember.value = userInfoStore.userInfo.is_member
// })
// onReady(()=>{
//   const userInfoStore = useUserInfoStore()
//   isMember.value = userInfoStore.userInfo.is_member
// })
</script>

<template>
  <view>
    <view class="vip">
      <image class="user_top_money_bg" :src="BaseImgUrl + '/once/user_vip.png'"></image>
      <view style="margin-left: 10rpx">
        <view class="title" v-if="!isMeiTuan">{{
            isMember === 1 ? '您是会员用户，本单多返至多3元' : '开通会员，本单可多返至多3元'
          }}
        </view>
        <view class="title" v-else>{{ isMember === 1 ? '您是会员用户，本单多返至多5%' : '开通会员，本单可多返至多5%' }}</view>
        <view style="height: 10rpx"></view>
        <view class="sub_title">每月饭钱省
          <text style="color: #FA642B">300元</text>
        </view>
      </view>
      <view style="flex: 1"></view>
      <view class="kaitong" @click="toVIP">{{ isMember === 1 ? '立即续费' : '立即开通' }}</view>
    </view>
    <view style="display: flex;margin: 0 30rpx 20rpx;">
      <view class="box_content" @click="toGroup">
        <image :src="BaseImgUrl + '/home/qunicon.png'" style="width: 72rpx;height: 72rpx"></image>
        <view class="text_content">
          <view class="text_one">
            加内部福利群
          </view>
          <view style="height: 16rpx"></view>
          <view class="text_tow">
            每月
            <text style="color: #FA642B">福利领不停</text>
          </view>
        </view>
      </view>
      <view style="flex: 1"></view>
      <view class="box_content" @click="toGetUser">
        <image :src="BaseImgUrl + '/home/jinqian.png'" style="width: 72rpx;height: 72rpx"></image>
        <view class="text_content">
          <view class="text_one">
            邀请好友赚奖金
          </view>
          <view style="height: 16rpx"></view>
          <view class="text_tow">
            至多可得
            <text style="color: #FA642B">165元</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.vip {
  margin: 0 30rpx 20rpx;
  height: 116rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.user_top_money_bg {
  width: 76rpx;
  height: 76rpx;
}

.kaitong {
  font-weight: bold;
  font-size: 26rpx;
  color: #FFFFFF;
  line-height: 56rpx;
  width: 160rpx;
  height: 56rpx;
  text-align: center;
  background: linear-gradient(270deg, #FC754A 0%, #FE9E54 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
}

.title {
  font-weight: bold;
  font-size: 26rpx;
  color: #333333;
  line-height: 30rpx;
}

.sub_title {
  font-weight: 400;
  font-size: 24rpx;
  color: #888888;
  line-height: 24rpx;
}

.box_content {
  width: 330rpx;
  height: 116rpx;
  background: #FFFFFF;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text_content {
  margin-left: 20rpx;

  .text_one {
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    line-height: 30rpx;
  }

  .text_tow {
    font-weight: 400;
    font-size: 24rpx;
    color: #888888;
    line-height: 24rpx;
  }
}
</style>